<template>
  <div class="newFriend-pages">
    <cp-nav-bar title="新的朋友" left-arrow></cp-nav-bar>
    <van-cell v-for="(data, index) in dataList" :key="data.requester_id" clickable
      ><div class="contact-item">
        <van-image
          width="38px"
          height="38px"
          fit="cover"
          radius="4px"
          :src="data.requester_avatar"
        ></van-image>
        <span class="contact-item-text">{{ data.requester_name }}</span>
        <van-button
          color="#16c2a3"
          size="mini"
          style="width: 60px; height: 30px"
          @click="accept(data, index)"
          v-if="data.status === 'pending'"
          >同意</van-button
        >
        <van-button
          color="#16c2a3"
          size="mini"
          style="width: 60px; height: 30px"
          @click="accept"
          v-else-if="data.status === 'accepted'"
          disabled
          >已同意</van-button
        >
      </div>
    </van-cell>
  </div>
</template>
<script setup lang="ts">
import { getNewFriendRequest } from '@/services/contact'
import { acceptFriendRequest } from '@/services/friend'
import { showToast } from 'vant'
import { ref } from 'vue'
const dataList = ref()
const getDataList = async () => {
  const res = await getNewFriendRequest()
  dataList.value = res.data
}
getDataList()
const accept = async (
  data: {
    requester_id: string
    requester_name: string
    requester_avatar: string
  },
  index: number
) => {
  await acceptFriendRequest(data.requester_id, data.requester_name, data.requester_avatar)
  dataList.value[index].status = 'accepted'
  showToast('已同意好友申请')
}
</script>
<style lang="scss" scoped>
.newFriend-pages {
  padding-top: 40px;
  background-color: var(--bg-primary);
  height: 100vh;
  box-sizing: border-box;
}
.contact-item {
  height: 100%;
  display: flex;
  justify-content: start;
  align-items: center;
  font-size: 16px;
  color: var(--cp-contact-color);

  .contact-item-icon {
    width: 40px;
    height: 40px;
  }
  .contact-item-text {
    margin-left: 20px;
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 显示省略号 */
    flex: 1;
    text-align: left;
  }
  .contact-item-search {
    font-size: 16px;
    color: rgba(153, 153, 153, 1);
    margin-left: 14px;
  }
  .add-friend-search {
    border: none;
    width: 130px;
  }
}
</style>
